import 'package:flutter/material.dart';

//ListView列表组件
void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('GridView.count 和 GridView.extent属性详解'),
          backgroundColor: Colors.green[100],
        ),
        body: MyHomePage(),
      ),
    );
  }
}

class MyHomePage extends StatelessWidget {
  MyHomePage({super.key});

  List<Widget> initGridView() {
    List<Widget> list = [];
    for (var i = 0; i < 10; i++) {
      list.add(
        Container(
          alignment: Alignment.center,
          decoration: BoxDecoration(color: Colors.blue),
          child: Text(
            '第${i + 1}个元素',
            style: TextStyle(color: Colors.white, fontSize: 20),
          ),
        ),
      );
    }
    return list;
  }

  @override
  Widget build(BuildContext context) {
    //GridView.count属性详解
    // return GridView.count(
    //   // reverse: true,//组件反向排序
    //   padding: EdgeInsets.all(10),
    //   crossAxisSpacing:10,//水平子Widget之间间距
    //   crossAxisCount: 2, //横轴子元素的最大长度
    //   mainAxisSpacing: 10,//垂直子Widget之间间距
    //   childAspectRatio:0.8,//子Widget的宽高比例
    //   children: initGridView(),
    // );

    // GridView.extent属性详解
    return GridView.extent(
      // reverse: true,//组件反向排序
      padding: EdgeInsets.all(10),
      crossAxisSpacing: 10, //水平子Widget之间间距
      maxCrossAxisExtent: 190, //横轴子元素的最大长度
      mainAxisSpacing: 10, //垂直子Widget之间间距
      childAspectRatio: 0.8, //子Widget的宽高比例
      children: initGridView(),
    );
  }
}
